<template>
    <div class="invoice-add">
        <!-- 页面导航 -->
        <van-nav-bar
            title="添加发票"
            left-arrow
            right-text="保存"
            @click-left="onClickLeft"
            @click-right="onClickRight"
        />

        <!-- 添加发票表单 -->
        <van-form>
            <!-- 抬头类型 -->
            <van-field name="type" label="抬头类型">
                <template #input>
                    <van-tag
                        class="invoice-type"
                        :type="currentType === item.id ? 'primary' : 'default'"
                        plain
                        @click="switchType(item)"
                        v-for="item in invoiceType"
                        :key="item.id"
                        >{{ item.name }}</van-tag
                    >
                </template>
            </van-field>

            <!-- 抬头名称 -->
            <van-field
                name="type"
                label="抬头名称"
                :placeholder="
                    currentType === 1 || currentType === 2
                        ? '必填，公司名称'
                        : '必填，个人姓名'
                "
                v-model="invoiceForm.name"
                style="margin: 0"
            />

            <!-- 税号 -->
            <transition name="van-fade">
                <van-field
                    name="type"
                    label="税号"
                    v-model="invoiceForm.sh"
                    v-show="currentType === 1 || currentType === 2"
                    style="margin: 0"
                />
            </transition>

            <!-- 邮箱 -->
            <van-field name="type" label="邮箱" v-model="invoiceForm.email" />

            <!-- 需要增值税专用发票 -->
            <transition name="van-fade">
                <van-field
                    name="type"
                    label="需要增值税专用发票"
                    v-show="currentType === 1 || currentType === 2"
                    label-width="150px"
                    input-align="right"
                >
                    <template #input>
                        <van-switch v-model="invoiceForm.is_zy" size="20" />
                    </template>
                </van-field>
            </transition>

            <!-- 设置为默认发票 -->
            <van-field
                name="type"
                label-width="150px"
                label="设置为默认发票"
                input-align="right"
            >
                <template #input>
                    <van-switch v-model="invoiceForm.is_default" size="20" />
                </template>
            </van-field>
        </van-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            invoiceType: [
                { id: 1, name: '企业' },
                { id: 2, name: '非企业单位' },
                { id: 3, name: '个人' },
            ],
            currentType: 1,
            invoiceForm: {
                name: '',
                sh: '',
                email: '',
                is_zy: false,
                is_default: false,
            },
        };
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        onClickRight() {
            console.log('保存');
        },
        switchType(item) {
            this.currentType = item.id;
        },
    },
};
</script>

<style lang="less" scoped>
.invoice-add {
    background-color: #f6f4f6;
    min-height: 100vh;
}

.van-field {
    margin-top: 10px;
}

.van-tag {
    margin-right: 5px;
}

.invoice-type {
    cursor: pointer;
}
</style>
